<template>
  <BasicForm @register="register" />
</template>

<script lang="ts" setup>
  /**
   * 设备配置预配置表单
   * formData<{}>:表单数据
   * **/
  import { BasicForm, useForm } from '/@/components/Form';
  import { schemasPreCfig } from './addModel.data';
  import { onMounted, ref, watch } from 'vue';
  import { modalFormStyleSetting } from '/@/settings/thingsBoardDesign';
  const props = defineProps({
    formData: {
      type: Object,
    },
    disable: { type: Boolean },
  });
  const [register, { validate, resetFields, setFieldsValue, setProps }] = useForm({
    layout: 'vertical',
    showSubmitButton: true,
    schemas: schemasPreCfig,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  let emitsValue = ref<any>();
  let isDisable = ref(false);
  watch(
    () => props.formData,
    (nVal) => {
      emitsValue.value = nVal;
    },
    { immediate: true },
  );
  watch(
    () => props.disable,
    (nVal) => {
      isDisable.value = nVal;
    },
    { immediate: true },
  );
  onMounted(() => {
    if (isDisable.value) {
      setProps({ disabled: true });
    }
    if (emitsValue.value) {
      if (emitsValue.value.certificateRegExPattern) {
        emitsValue.value.PEMprovisionDeviceSecret = emitsValue.value.provisionDeviceSecret;
      }
      setFieldsValue(emitsValue.value);
    }
  });

  async function getData() {
    let res = await validate;
    return res;
  }
  defineExpose({
    validate,
    resetFields,
    getData,
  });
</script>
